<template>
  <view class="min-vh-100 d-flex flex-column select">
    <StatusBar></StatusBar>
    <HeaderComponent title="支持的银行" title2="客服" class="w-100" style="width: 10%"></HeaderComponent>
    <view class="mt-3 mx-4">
      目前支持11家银行卡交易，其中四家无需您自行办理银期关联,剩余七家需通过网银或银行app进行银期。关联，可入金交易。详细操作指引可关注平安期货微服务公众号，回复银行名称查询。
    </view>
    <view class="mt-3 mx-4 d-flex">
      <view style="width: 0.2rem; background-color: #ff0000"></view>
      <view class=" ms-1 fw-bold">无办理银期关联</view>
    </view>
    <view class="mt-2 mx-4 p-3 d-flex flex-wrap">
      <view v-for="(item, index) in bankList1" :key="index" class="col-6 text-center" style="border: 1px solid black">
        {{ item }}
      </view>
    </view>
    <view class="mx-4 fw-bold" style="color: #FF0000; font-size: 0.8rem">注：招商银行需前往银行端进行银期激活</view>
    <view class="mt-3 mx-4 d-flex">
      <view style="width: 0.2rem; background-color: #ff0000"></view>
      <view class="ms-1 fw-bold">要办理银期关联</view>
    </view>
    <view class="mt-2 mx-4 p-3 d-flex flex-wrap">
      <view v-for="(item, index) in bankList2" :key="index" class="col-6 text-center" style="border: 1px solid black">
        {{ item }}
      </view>
    </view>
    <view class="mt-2 mx-4">
      <text class="fw-bold" style="color: #FF0000; font-size: 0.8rem">
        注：工商银行银期办理时间仅为交易日8:30-15:30，
      </text>
      <text style="font-size: 0.8rem">其他银行还支持交易日20:30-凌晨02:30办理。</text>
    </view>
    <view class="flex-grow-1"></view>
    <view class="w-100 mt-4 mb-3 d-flex justify-content-around align-self-end">
      <view class="text-secondary" @tap="goto('/pages/start/common_problem/common_problem')">常见问题</view>
      <view class="text-secondary">|</view>
      <view class="text-secondary">银期转账</view>
      <view class="text-secondary">|</view>
      <AttentionWx class="text-secondary"></AttentionWx>
    </view>
  </view>
</template>

<script>
import HeaderComponent from "../../common/HeaderComponent.vue";
import AttentionWx from "../../common/AttentionWx.vue";
import StatusBar from "../../common/StatusBar.vue";

export default {
  components: {
    StatusBar,
    AttentionWx,
    HeaderComponent,
  },
  name: 'home',
  data() {
    return {
      bankList1: [
        '建设银行',
        '兴业银行',
        '民生银行',
        '招商银行',],
      bankList2: [
        '平安银行',
        '中信银行',
        '中国银行',
        '光大银行',
        '农业银行',
        '交通银行',
        '工商银行'
      ],
    }
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url,
      });
    },
  }
}
</script>

<style>
</style>
